<script setup lang="ts">
import {defineProps} from "vue";
import {Checked} from '@element-plus/icons-vue'
import {courseTypeFn} from "@/util/mixins";
const props = defineProps({
  title:{
    type:String,
    default:"小鹿线前端H5班"
  },
  imgUrl: {
    type:String,
    default:"https://oss.xuexiluxian.cn/xiaoluxian-vcr/b034ff0f4b3947cea114894a2c3be6cc.jpg"
  },
  dengji:{
    type:Number,
    default:1
  },
  count:{ // 报名人数
    type:Number,
    default:1
  },
  price:{
    type:Number,
    default:16690
  },
  member:{
    type:Boolean,
    default:true
  }
})
</script>

<template>
  <div class="card">
      <img :src="props.imgUrl" alt="" />
      <div class="card-body">
        <div class="title"><router-link to="">{{props.title}}</router-link></div>
        <p class="dengji">{{courseTypeFn(props.dengji)}} · {{props.count}}人报名</p>
        <div class="priceDiv" >
          <div class="vip" v-if="props.member"><p>会员专享</p></div>
          <p class="price" v-if="props.price>0">￥{{props.price.toFixed(2)}}</p>
          <p v-else class="free">
            免费学习
            <el-icon><Checked /></el-icon>
          </p>
        </div>
      </div>
  </div>
</template>

<style scoped>
.card{
  width: 230px;
  height: 230px;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
  img{
    border-radius: 10px 10px 0 0;
    width: 230px;
    height: 130px;
  }
  .card-body{
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 10px ;
    .title{
      font-size: 16px;
      font-weight: 600;
    }
    .dengji{
      font-size: 12px;
      color: #808080;
    }
    .priceDiv{
      display: flex;
      justify-content: space-between;
      .vip{
        p{
          width: 64px;
          height: 16px;
          background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
          font-size: 12px;
          padding: 2px 8px;
          display: flex;
          border-radius: 16px 0 16px 0;
          color: #fff;
        }
      }
      .price{
        font-size: 16px;
        color: #fe7062;
      }
      .free{
        color: #388FFF;
        font-size: 14px;
        .el-icon{
          color: #808080;
        }
      }
    }
  }
}
.picture{
  padding: 10px;
  width: 120px;
  &>img{
    width: 140px;
    height: 80px;
    border-radius: 10px;
  }
  .card-body{
    height: 80px;
    justify-content: space-between;
    color: #0c0c0c;
  }
}
</style>